<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
				color: white;
				font-size: 40px;
				text-align: center;
				list-style: none;
			}
			
			header {
				height: 1000px;
				background: #FFFF00;
				opacity: .3;
			}
			
			.web div:not(:last-of-type) {
				box-sizing: border-box;
				border: 1px solid red;
				background: linear-gradient(#000, #0f0);
			}
			
			.div1 {
				height: 600px;
			}
			
			.div2 {
				height: 1000px;
			}
			
			.div3 {
				height: 1200px;
			}
			
			.div4 {
				height: 800px;
			}
			
			.div5 {
				height: 1500px;
			}
			
			.div6 {
				height: 1800px;
			}
			
			.point_box {
				position: fixed;
				right: 50px;
				top: 0;
				bottom: 0;
				height: 276px;
				margin: auto 0;
				display: none;
			}
			
			.point_box li {
				font-size: 0;
			}
			
			.point_box span {
				display: inline-block;
				vertical-align: middle;
			}
			
			.point_box i {
				width: 20px;
				height: 20px;
				background: #C1C1C1;
				border-radius: 50%;
				cursor: pointer;
				display: inline-block;
				vertical-align: middle;
				position: relative;
				z-index: 1;
			}
			
			.point_box li {
				position: relative;
				line-height: 46px;
			}
			
			.point_box span {
				position: absolute;
				color: skyblue;
				opacity: 0;
				right: -10px;
				top: 0;
				transition: all .5s;
				white-space: nowrap;
				cursor: default;
			}
			
			.point_box li.active span,
			.point_box li:hover span {
				opacity: 1;
				right: 30px;
			}
			
			.point_box li.active i,
			.point_box li:hover i {
				background: skyblue;
			}
		</style>
		<div class="web">
			<header></header>
			<div class="div1">11111111111111111111</div>
			<div class="div2">22222222222222222222</div>
			<div class="div3">33333333333333333333</div>
			<div class="div4">44444444444444444444</div>
			<div class="div5">55555555555555555555</div>
			<div class="div6">66666666666666666666</div>
			<div class="point_box">
				<ul>
					<li><span>模块一</span><i></i></li>
					<li><span>模块二</span><i></i></li>
					<li><span>模块三</span><i></i></li>
					<li><span>模块四</span><i></i></li>
					<li><span>模块五</span><i></i></li>
					<li><span>模块六</span><i></i></li>
				</ul>
			</div>
		</div>

		<script type="text/javascript">
//			模仿蓝景官网(https://bluej.cn/newPage/app/Development.html)的侧边导航
			/*
			 * 1. 右侧导航栏出现的时机
			 * 2. 去到对应的模块时才出现对应的文字
			 * 3. 点击对应的模块名去到对应位置
			 * 4. 动画过程中再次点击是无效的
			 */
			var web = document.querySelector(".web");
			var point_box = document.querySelector(".point_box");
			var li_s = point_box.querySelectorAll("li");
			var header_H = document.querySelector("header").offsetHeight;
			var point1_H = web.children[2].offsetTop;
			var point2_H = web.children[3].offsetTop;
			var point3_H = web.children[4].offsetTop;
			var point4_H = web.children[5].offsetTop;
			var point5_H = web.children[6].offsetTop;
			var point6_H = web.children[7].offsetTop;
			var isRun = false;
			window.addEventListener("scroll", function() {
				var body_top = document.body.scrollTop;
				if(body_top > header_H) {
					point_box.style.display = "block";
					switch(true) {
						case body_top <= (point1_H):
							add_active(0);
							break;
						case body_top <= (point2_H):
							add_active(1);
							break;
						case body_top <= (point3_H):
							add_active(2);
							break;
						case body_top <= (point4_H):
							add_active(3);
							break;
						case body_top <= (point5_H):
							add_active(4);
							break;
						default:
							add_active(5);
							break;
					}
				} else {
					point_box.style.display = "none";
				}
			})

			function add_active(index) {
				for(var i = 0; i < li_s.length; i++) {
					li_s[i].classList.remove("active");
				}
				li_s[index].classList.add("active");
			}

			for(var i = 0; i < li_s.length; i++) {
				(function(i) {
					li_s[i].addEventListener("click", function() {
						if(!isRun) {
							isRun = true;
							var body_top = document.body.scrollTop;
							var order_top = web.children[1 + i].offsetTop;
							var body_speed = Math.abs(body_top - order_top) / 50;
							if(order_top - body_top >= 0) {
								run(body_top, order_top, body_speed);
							} else {
								body_speed = -(body_speed);
								run(body_top, order_top, body_speed);
							}
						}
					})
				})(i)
			}

			function run(body_top, order_top, body_speed) {
				console.log(body_top, order_top, body_speed)
				var time = setInterval(function() {
					body_top += body_speed;
					document.body.scrollTop = body_top;
					if(body_speed >= 0) {
						if(body_top > order_top) {
							document.body.scrollTop = order_top + 1;
							clearInterval(time);
							isRun = false;
						}
					} else {
						if(body_top < order_top) {
							document.body.scrollTop = order_top + 1;
							clearInterval(time);
							isRun = false;
						}
					}
				}, 20)
			}
		</script>
	</body>

</html>